<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1.text1 {
            text-shadow: 2px 2px
        }
        h1.text2 {
            text-shadow: 2px 2px 5px red
        }
        h1.text3 {
            text-shadow: 0 0 3px #FF0000
        }

        h1.text4 {
            text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
        }
        h1.text5 {
            color: white;
            text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
        }
        /*--------------------*/
        div.box1 {
            width: 300px;
            height: 100px;
            padding: 15px;
            background-color: yellow;
            box-shadow: 10px 10px 5px grey;
        }
        img.box2 {
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 5px;
            width: 150px;
        }
        img.box2:hover {
            box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
        }
        /*----------- card --------------*/
        div.card {
            width: 250px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: center;
        }
        div.header {
            background-color: #4CAF50;
            color: white;
            padding: 10px;
            font-size: 3em;
            font-weight: bold;
        }
        div.container {
            padding: 10px;
        }

        div.card2 {
            width: 300px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: center;
        }
        div.card2 > .thumb {
            width: 100%;  /*基于父容器缩放*/
        }
        div.container2 {
            padding: 10px;
        }
    </style>
</head>
<body>
<h1>CSS Shadow Effects</h1>
<h3>CSS Text Shadow</h3>
2个参数，X轴偏移量，Y轴偏移量 <br>
<h1 class="text1">Text-shadow effect!</h1>

3个参数，X偏移量，Y轴偏移量，阴影颜色； <br>
4个参数，X偏移量，Y轴偏移量，模糊半径，阴影颜色
<h1 class="text2">Text-shadow effect!</h1>

红色霓虹灯发光阴影 <br>
<h1 class="text3">Text-shadow effect!</h1>
<hr>
<h3>Multiple Shadows</h3>
向文本添加多个阴影，可以添加以逗号分隔的阴影列表 <br>
红色和蓝色霓虹灯发光阴影 <br>
<h1 class="text4">Text-shadow effect!</h1>

带有黑色，蓝色和深蓝色阴影的白色文本 <br>
<h1 class="text5">Text-shadow effect!</h1>
<hr>
<h3>CSS box-shadow Property</h3>

CSS box-shadow属性将阴影应用于元素 <br>
指定水平阴影和垂直阴影
<div class="box1">This is a div element with a box-shadow</div>
<br>

使用border为图片添加镜框效果，鼠标悬浮时添加阴影表示可操作。 <br>
<a href="../resources/images/paris.jpg">
    <img src="../resources/images/paris.jpg" class="box2">
</a>
<hr>
<h3>Cards</h3>
Card，是包括Google Material Design，iOS Human Interface Guidelines均涉及的经典设计风格 <br>
使用box-shadow属性创建卡片 <br>
Card一般由2部分组成，放置标题或图片的header，以及内容。因此，创建card容器(div)，嵌套header容器(div)以及内容容器(div) <br>
为card容器添加阴影，使其具有立体悬浮感 <br>
<br>
<div class="card">
    <div class="header">
        <p>1</p>
    </div>

    <div class="container">
        <p>October, 2046</p>
    </div>
</div>

<br><br><br>
包含图片的card <br>
<div class="card2">
    <img class="thumb" src="../resources/images/paris.jpg" alt="Paris">
    <div class="container2">
        <p>Paris, France</p>
    </div>
</div>

</body>
</html>